<template>
  <div>
    <el-calendar>
      <!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
      <template slot="dateCell" slot-scope="{ date, data }">
        <div><p
          :class="data.isSelected ? 'is-selected' : ''"
          @click="showForm(date)"
        >
          {{ data.day.split("-").slice(1).join("-") }}
          {{ data.isSelected ? "✔" : "" }}
        </p></div>
      </template>
    </el-calendar>

    <el-dialog
      title="预约设置"
      :visible.sync="formVisible"
      width="30%"
      class="dialog-container"
      center
    >
      <div class="dialog-content">
        <div class="dialog-inner-content">
          <p>选择的日期：{{ formattedDate }}</p>
          <p>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;可 预 约：{{ordersetting.number}}人
          </p>
          <p>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;已 预 约：{{ordersetting.reservations}}人
          </p>
        </div>
      </div>
      <div>
        <el-form
          :inline="true"
          :model="ordersetting"
          :rules="rules" 
          ref="ordersetting"
          class="demo-form-inline"
        >
          <el-form-item label="可预约人数" prop="num">
            <el-input
              v-model="ordersetting.num"
              placeholder="可预约人数"
              style="width: 300px;"
            ></el-input>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="formVisible = false">取 消</el-button>
        <el-button type="primary" @click="UpAndAdd('ordersetting')" >确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<style scoped>
.is-selected {
  color: #1989fa;
}
.el-dialog__header {
  padding: 20px 20px 10px;
  background-color: #dcdfe6;
}
</style>

<script>
export default {
  data() {
    return {
        formVisible:false,
        selectedDate:null,
        ordersetting:{id:null,orderdate:null,number:0,reservations:0,num:null},
        rules: {
            num: [{ required: true, message: "请输入可预约人数", trigger: "blur" }],
              },
    };
  },
  computed: {
    formattedDate() {
      if (this.selectedDate) {
        const year = this.selectedDate.getFullYear();
        const month = String(this.selectedDate.getMonth() + 1).padStart(2, "0");
        const day = String(this.selectedDate.getDate()).padStart(2, "0");
        return `${year}-${month}-${day}`;
      }
      return "";
    },
  },
  methods: {
    showForm(date) {
      this.selectedDate = date;
      this.formVisible = true;
      this.info();
    },
    info(){
        this.ordersetting={number:0,reservations:0,orderdate:this.formattedDate}
         const loading = this.$loading({
         lock: true,
         text: "正在显示中",
         spinner: "el-icon-loading",
         background: "rgba(0, 0, 0, 0.2)",
       });
       this.axios.post("/rear/LYN/orderSettingInfo", this.ordersetting).then((req) => {
         loading.close();
         if(req.data!=''){
            this.ordersetting=req.data;
         }
    });
    },
    UpAndAdd(formName){
        if (parseFloat(this.ordersetting.num) < parseFloat(this.ordersetting.reservations)) {
        this.$message({
            message: "可预约人数不能小于已预约人数",
            type: "error",
          });
        return;
      } 
      this.$refs[formName].validate((valid) => {
        if (valid) {
            this.ordersetting.number=this.ordersetting.num;
          const loading = this.$loading({
        lock: true,
        text: "正在修改中",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.2)",
      });
      this.axios.post("/rear/LYN/UpAndAddOrderSetting", this.ordersetting).then((req) => {
        loading.close();
        if (req.data > 0) {
          this.formVisible = false;
          this.$message({
            message: "修改成功",
            type: "success",
          });
        }
      });
        } else {
          this.$message({
            message: "信息未输入完成",
            type: "error",
          });
          return false;
        }
      });
    }
    
  },
};
</script>